<template>
  <div>
    <el-select
      class="minselect"
      v-model="form.province"
      placeholder="请选择省"
      @change="changePro"
    >
      <el-option
        v-for="item in addressData"
        :key="item.code"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="form.city"
      class="minselect"
      placeholder="请选择市"
      @change="changeCity"
    >
      <el-option
        v-for="item in cityData"
        :key="item.code"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="form.district"
      class="minselect"
      placeholder="请选择区"
      @change="changeArea"
    >
      <el-option
        v-for="item in areaData"
        :key="item.code"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="form.street"
      placeholder="请选择街道"
      class="minselect"
      @change="changeStreet"
    >
      <el-option
        v-for="item in jdData"
        :key="item.code"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="form.community"
      class="minselect"
      placeholder="请选择社区"
      @change="changeCommunity"
    >
      <el-option
        v-for="item in communityDate"
        :key="item.code"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    <!-- <el-button type="warning" class="minibutlocation" icon="el-icon-coordinate"
       circle @click="minilocation2"></el-button> -->
  </div>
</template>

<script>
import address from "./address.json";

export default {
  name: "loacaAddress",
  data() {
    return {
      // 2 / 省级 
      // 3 / 市级
      // 4 / 县级
      // 5 / 乡级
      // 6 / 村级
      topnub:2,
      addressData: [],
      //  市数据
      cityData: [],
      // 区数据
      areaData: [],
      jdData: [],
      communityDate: [],
      form: {
        province: "",
        provincecode: "",
        // 市
        city: "",
        citycode: "",
        // 区
        district: "",
        districtcode: "",
        street: "",
        streetcode: "",
        //详细地址
        detail: "",
        regionalNumber: "",
        community: "",
      },
    };
  },

  created() {
    // 省份数据初始化
    this.addressData = address;
    // console.log("this.form",this.form)

    if (this.form.province != "") {
      let cityData = this.addressData.filter(
        (item) => item.name == this.form.province
      );
      if (cityData.length) {
        this.cityData = cityData[0].children;

        let areaData = this.cityData.filter(
          (item) => item.name == this.form.city
        );
        if (areaData.length) {
          this.areaData = areaData[0].children;
        }
      }
    }
  },
  methods: {
    reset() {
      this.form={
        province: "",
        provincecode: "",
        // 市
        city: "",
        citycode: "",
        // 区
        district: "",
        districtcode: "",
        street: "",
        streetcode: "",
        //详细地址
        detail: "",
        regionalNumber: "",
        community: "",
      }
    },
    // 省份更改
    changePro(e) {
      // 从省中过滤出市的数据
      this.cityData = this.addressData.filter((item) => {
        return item.name == e;
      })[0].children;
      // 省发生改变的时候 清空输入框市区街道的内容

      this.form.district = "";
      this.form.city = "";
      this.form.regionalNumber = this.cityData[0].code;
      this.form.street = "";
      this.form.community = "";
      this.topnub=2

      // this.form.city = this.cityData[0].name;
      // 省发生更改时 该表空区街道数据的内容
      // this.areaData = this.cityData[0].children;
      // this.form.district = this.areaData[0].name
    },
    // 市更改
    changeCity(e) {
      // 获取到区的数据
      this.areaData = this.cityData.filter(
        (item) => item.name == e
      )[0].children;
      this.form.regionalNumber = this.areaData[0].code;
      // 清空数据后面对应数组的数据
      this.form.district = "";
      this.form.street = "";
      this.form.community = "";
      this.topnub=3
      // this.form.district = this.areaData[0].name;
    },
    // 区更改
    changeArea(e) {
      let temp = this.areaData.filter((item) => item.name == e);
      // 获取到区的code码
      this.form.regionalNumber = temp[0].code;
      // 获取到街道的数据
      this.jdData = this.areaData.filter((item) => item.name == e)[0].children;
      this.form.street = "";
      this.form.community = "";
      this.topnub=4

    },
    changeStreet(e) {
      let temp = this.jdData.filter((item) => item.name == e);
      this.form.regionalNumber = temp[0].code;
      this.communityDate = this.jdData.filter(
        (item) => item.name == e
      )[0].children;
      this.form.community = "";
      this.topnub=5

    },
    changeCommunity(e) {
      // console.log(e)
      let temp = this.communityDate.filter((item) => item.name == e);
      console.log(temp);
      this.form.regionalNumber = temp[0].code;
      this.topnub=6

    },

    minilocation(){
      console.log(this.topnub)
      let {form}=this
      let loctionname= form.province + form.city+form.district+form.street+form.community
      this.$emit('locationbox',{
        toptopnub:this.topnub,
        name:loctionname,
        regionalNumber:form.regionalNumber,
        community:form.community
      })
    }
  },
};
</script>

<style  scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  /* display: inline-block; */
  margin: 0 10px;
}
a {
  color: #42b983;
}
.butbox {
  margin-left: 15px;
  display: inline-block;
}
.leftcar {
  width: 1200px;
  margin-left: 15px;
}
.topindex {
  width: 600px;
}
::v-deep .el-form-item__content {
  text-align: left !important;
}
.minselect {
  width: 145px;
  margin: 0 5px;
}
.minibutlocation{
  display: inline-block;
}
</style>
